<template>
	<view class="page__content">
		<u-navbar :fixed="false" :title="basicInfo.APFunName" :autoBack="true" :safeAreaInsetTop="true"
			leftIconColor="#fff"></u-navbar>

		<view class="page__content__main" style="padding: 10px;">
			<!-- 安全库存预警 -->
			<view class="commonBox" style="background-color: rgba(248, 48, 13,0.6);">
				<view class="x-c" style="font-weight: 600;color: #fff;">
					<text>安全库存预警</text>
				</view>

				<view class="x-bc" style="margin-top: 40rpx;color: #fff;">
					<view class="y-f" style="flex: 1;">
						<text>超过安全库存数</text>
						<text>{{ safeInfo.MAXSafeStock }}</text>
					</view>
					<view class="y-f" style="flex: 1;">
						<text>低于安全库存数</text>
						<text>{{ safeInfo.SafeStock }}</text>
					</view>
				</view>
			</view>

			<!-- 卡片区 -->
			<view class="commonBox">
				<view class="commonBox-title">
					<view class="commonBox-title-right">
						<u-tabs lineColor="#51d0d0" lineWidth="30" :current="tabsCurrent" @change="changeTopTabs"
							:activeStyle="{ color:'#51d0d0', fontWeight:'500', transform:'scale(1.05)' }"
							:list="realCondition"></u-tabs>
					</view>
				</view>

				<view class="commonBox-content">
					<view class="scrollWrap">
						<view v-for="(item, index) in cardData" :key="index" class="scrollWrap-item">
							<view class="y-f">
								<text>{{ item[realCondition[tabsCurrent].tabValueKey] }}</text>
								<text style="margin-top: 8px;font-size: 12px;">{{ item.title }}</text>
							</view>
						</view>
					</view>
				</view>
			</view>

			<!-- 图表1 -->
			<view class="commonBox">
				<view class="commonBox-title-left"><text>存货构成top6</text></view>
				<view class="commonBox-content">
					<m-uCharts chartType="pie" :chartData="chartData1" :ChartsStyle="ChartsStyle"></m-uCharts>
				</view>
			</view>

			<!-- 图表2 -->
			<view class="commonBox">
				<view class="commonBox-title-left"><text>存货库龄分布</text></view>
				<view class="commonBox-content">
					<m-uCharts chartType="pie" :chartData="chartData2" :ChartsStyle="ChartsStyle"></m-uCharts>
				</view>
			</view>

			<!-- 图表3 -->
			<view class="commonBox">
				<view class="commonBox-title-left"><text>仓库物料每周出入库</text></view>
				<view class="commonBox-content">
					<m-uCharts chartType="column" :chartData="chartData3" :ChartsStyle="ChartsStyle"></m-uCharts>
				</view>
			</view>

			<!-- 图表4 -->
			<view class="commonBox">
				<view class="commonBox-title-left"><text>仓库每月进出库变动</text></view>
				<view class="commonBox-content">
					<m-uCharts chartType="column" :chartData="chartData4" :ChartsStyle="ChartsStyle"></m-uCharts>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	import { ref, reactive, onMounted, computed } from 'vue';
	import dataInitFun from '@/commonPage/kanban/BIKanban/js/dataInit';
	import useRequestQueue from '@/uni_modules/mc-ui/libs/http/UniversalRequestQueue';
	const { request, requestByUrl, PromiseRequestByUrl, onAllComplete, onError } = useRequestQueue();
	import { useMainStore, useInventoryStore } from '@/store';
	const mainStore = useMainStore();
	const inventoryStore = useInventoryStore();
	import mUCharts from '../../components/m-uCharts/m-uCharts.vue';

	// -------------------- 数据定义 --------------------
	const dataInit = dataInitFun

	const basicInfo = ref({ APFunName: ' ' })
	const safeInfo = ref<Record<string, any>>({})
	const cardData = ref<any[]>([])
	const tabsCurrent = ref(0)
	const realCondition = [
		{ name: '实际值', tabValueKey: 'oldValue' },
		{ name: '同期值', tabValueKey: 'newValue' }
	]

	const ChartsStyle = { width: '100%', height: '240px' }
	const chartData1 = ref({})
	const chartData2 = ref({})
	const chartData3 = ref({})
	const chartData4 = ref({})

	// -------------------- 生命周期 --------------------
	onMounted(() => {

		basicInfo.value = uni.$utils.deepClone(inventoryStore.Menu);
		getDataInfo()
	})

	// -------------------- 方法区 --------------------
	const getDataInfo = () => {
		request({
			config: {
			},
			url: 'plat_cangku',
			method: 'POST',
			data: {},
			success: (ret : any) => {
				if (ret.status === 200) {
					safeInfo.value = ret.data.ds[0]
					cardData.value = dataInit.getInitByKanban('仓库', ret.data)

					chartData1.value = { ds5: ret.data.ds5.map((i : any) => ({ name: i.ProductCode, value: +i.Rate, type: 'pie' })) }
					chartData2.value = { ds6: ret.data.ds6.map((i : any) => ({ name: i.name, value: +i.FQty, type: 'pie' })) }
					chartData3.value = { ds7: transformData(ret.data.ds7) }
					chartData4.value = { ds8: transformData(ret.data.ds8, 'month') }
				}
			}
		});
	}

	const transformData = (data : any[], dateKey = 'BillDate', ckQtyKey = 'CKQty', rkQtyKey = 'RKQty') => {
		if (!Array.isArray(data)) return []
		return data.flatMap(item => ([
			{ seriesName: '入库数量', name: item[dateKey], value: item[ckQtyKey], type: 'column' },
			{ seriesName: '出库数量', name: item[dateKey], value: item[rkQtyKey], type: 'column' }
		]))
	}

	const changeTopTabs = (data : any) => {
		tabsCurrent.value = data.index
	}
</script>

<style lang="scss" scoped>
	.page__content {
		background-color: #f9f9f9;
		height: 100vh;
	}

	.scrollWrap {
		display: flex;
		flex-direction: column;
		flex-wrap: wrap;
		max-height: 180px;
		overflow-y: hidden;
		overflow-x: auto;
		row-gap: 3px;
		column-gap: 3px;

		&-item {
			min-width: 35vw;
			height: 80px;
			display: flex;
			flex-direction: column;
			background: linear-gradient(to bottom right, #F6F6F6, #FFFFFF);
			border-radius: 5px;
			padding: 5px 10px;
			justify-content: center;
			align-items: center;
		}
	}

	.commonBox {
		display: flex;
		flex-direction: column;
		padding: 10px 5px;
		background-color: #ffffff;
		margin-bottom: 10px;
		border-radius: 16rpx;

		&-title {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 10px 5px 10px 10px;
			font-weight: 500;
		}
	}
</style>